---
import { BaseLayout } from '../layouts';
import { AboutContent } from '../components/sections';
import {
  SITE_BASE_URL,
  PAGE_TITLES,
  SITE_DESCRIPTION_EN,
  HOME_PAGE_PATH,
  STYLE_PATHS
} from '../constants';
import { getCurrentLang } from '../utils';

const langDefault = getCurrentLang();
const langKey = langDefault.startsWith('zh') ? 'zh' : 'en';
const titleZh = PAGE_TITLES.ABOUT_ZH;
const titleEn = PAGE_TITLES.ABOUT_EN;
const title = langKey === 'zh' ? titleZh : titleEn;
---

<BaseLayout
  lang={langDefault}
  titleZh={titleZh}
  titleEn={titleEn}
  title={title}
  description={SITE_DESCRIPTION_EN}
  canonical={`${SITE_BASE_URL}${HOME_PAGE_PATH}`}
  extraStyles={[STYLE_PATHS.ABOUT, STYLE_PATHS.SOCIAL_ICON, STYLE_PATHS.RESPONSIVE_HERO]}
  bodyClass="c-about-page"
>
  <AboutContent client:load />
</BaseLayout>
